<template>
	<view>
		<view class="formbox">

			<view class="formbox-item1">
				<view class="title">标题</view>
				<view class="value">
					<input v-model="title" placeholder-class="placeholderClass" placeholder="请输入标题" />
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">要求</view>
				<view class="value">
					<input v-model="require" placeholder-class="placeholderClass" placeholder="学历不限2年工作经验" />
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">工种</view>
				<view class="value">
					<picker @change="bindPickerType" :value="index" :range="worktypeNameList">
						<view class="uni-input">{{typeName}}</view>
					</picker>
					<image class="right" src="../../static/usercenter/icon_zk.png"></image>
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">薪资范围</view>
				<view class="value">
					<input v-model="money" placeholder-class="placeholderClass" placeholder="10000~16000元" />
				</view>
			</view>

			<view class="formbox-item1">
				<view class="title">人数</view>
				<view class="value">
					<input v-model="num" type="number" placeholder-class="placeholderClass" placeholder="人数要求" />
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">福利</view>
				<view class="value">
					<text v-for="item in tag">{{item}}</text>
				</view>


			</view>
			<view class="formbox-item2">
				<input v-model="inputTag" type="text" placeholder="添加福利" />
				<button @click="addTag">添加福利</button>
			</view>
			<view class="formbox-item1">
				<view class="title">岗位描述</view>
				<view class="value">
					<textarea type="text" v-model="mark" placeholder-class="placeholderClass" placeholder="请输入描述" />
				</view>
			</view>

		</view>

		<view class="fiexd-btn">
			<button @click="doPublish">发布</button>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				array: ['工种1', '工种2', '工种3', '工种4'],
				index: 0,
				list: [],
				worktypeNameList: [],
				typeName: '请选择工种',
				tag: [],
				inputTag: '',
				money: '',
				mark: '',
				workId: '',
				num: '',
				require: '',
				title: ''

			}
		},
		onLoad() {

			this.worktypeList();
		},
		methods: {


			doPublish() {

				if (this.title == '') {
					this.$util.$showToast('请填写标题', '', 'none');
					return;
				}
				if (this.require == '') {
					this.$util.$showToast('请填写要求', '', 'none');
					return;
				}
				if (this.workId == '') {
					this.$util.$showToast('请选择工种', '', 'none');
					return;
				}
				if (this.money == '') {
					this.$util.$showToast('请填写薪资', '', 'none');
					return;
				}
				if (this.tag.length == 0) {
					this.$util.$showToast('请添加标签', '', 'none');
					return;
				}
				if (this.mark == '') {
					this.$util.$showToast('请添加描述', '', 'none');
					return;
				}

				var tagStr = "";
				for (var i = 0; i < this.tag.length; i++) {
					tagStr = tagStr + this.tag[i];
					if (i != this.tag.length - 1) {
						tagStr = tagStr + ","
					}
				}
				let param = {
					workId: this.workId,
					money: this.money,
					tag: tagStr,
					mark: this.mark,
					require: this.require,
					num: this.num,
					title: this.title

				}
				let that = this;
				this.$api.publish(param).then(res => {
					console.info(res);
					if (res.code == 1) {

						that.$util.$showToast("发布成功", '', 'none');
						uni.navigateBack({
							delta: 1
						})
					} else {
						that.$util.$showToast(res.msg, '', 'none');

					}

				})
			},
			addTag() {
				if (this.inputTag != '') {

					if (this.tag.length > 5) {

						this.$util.$showToast("最多只能添加5个标签", '', 'none');

						return;
					}

					var isExit = false;
					for (var i = 0; i < this.tag.length; i++) {
						if (this.tag[i] == this.inputTag) {
							isExit = true;
						}
					}
					if (!isExit) {
						this.tag.push(this.inputTag);
						this.inputTag = "";
					}
				}
			},
			worktypeList() {

				let param = {}
				let that = this;
				this.$api.worktype(param).then(res => {
					console.info(res);
					if (res.code == 1) {
						that.list = res.data;
						for (var i = 0; i < res.data.length; i++) {
							that.worktypeNameList.push(res.data[i].workname)
						}
					}

				})
			},

			bindPickerType(e) {
				var index = e.target.value
				console.info("===index====" + this.list[index].workname)
				this.workId = this.list[index].id;
				this.typeName = this.list[index].workname;
			},
		}
	}
</script>

<style lang="scss">
	.formbox {
		padding-bottom: 120rpx;
		.placeholderClass {
			font-size: 24rpx;

		}

		.formbox-item1 {
			margin: 0 20rpx;
			padding: 25rpx 0;
			border-bottom: 1rpx solid #e0e0e0;

			.title {
				font-size: 24rpx;
				color: #333333;
				margin-bottom: 10rpx;
			}

			.value {
				display: flex;
				textarea{
					height: 100px;
				}
				picker {
					font-size: 24rpx;
					color: #BFBFBF;
					flex: auto;
				}

				text {
					border-radius: 5rpx;
					background: #F5F5F5;
					padding: 4rpx 10rpx;
					font-size: 24rpx;
					margin: 0 10rpx 0 0;
					color: #666666;
				}

				.right {
					width: 36rpx;
					height: 36rpx;
				}
			}

		}

		.formbox-item1:last-child {
			border-bottom: 0rpx;
		}

	}

	.formbox-item2 {
		display: flex;
		margin: 0 40rpx;
		margin-top: 40rpx;

		input {
			width: 450rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #F1F1F1;
			border-radius: 30rpx;
			font-size: 24rpx;
			color: #BFBFBF;
			padding: 0 30rpx;
		}

		button {
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #37C2BC;
			border-radius: 30rpx;
			font-size: 24rpx;
			color: #FFFFFF;
		}

		
	}
	
	.fiexd-btn {
		position: fixed;
		width: 96%;
		margin-top: 10rpx;
		bottom: 10px;
		left: 2%;
		z-index: 100;
		button {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: #37C2BC;
			border-radius: 30rpx;
			font-size: 24rpx;
			color: #FFFFFF;
	
	
		}
	}
</style>
